<template>
	<view class="chatPage">
		<view class="tabBar">
			<view class="t-left">
				<image style="width: 20px; height: 20px;" src="../../../static/img/back.png" mode="" @click="goBack">
				</image>
			</view>
			<view class="t-center">
				<image class="c-avator" src="../../../static/img/avator_1.png" mode=""></image>
				<text>Message</text>
			</view>
			<view class="t-right">
				<image style="width: 20px; height: 20px;" src="../../../static/img/phone.png" mode=""></image>
			</view>
		</view>

		<scroll-view scroll-y="true" class="chat-content">
			<view class="date-box">
				<uni-dateformat :date="new Date()"></uni-dateformat>
			</view>
			<view class="chat-text-box" v-for="item in chatList" :key="item.text"
				:class="item.type === 'answer' ? 'a-box' : 'q-box'">
				<view class="chat-text">{{item.text}}</view>
			</view>
		</scroll-view>

		<view class="input-box">
			<input class="chat-input" v-model="askText" placeholder="请输入" cursor-spacing="15" :adjust-position="true" />
			<view class="send-btn" @click="handleSubmit">发送</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const askText = ref('')

	const chatList = ref([{
		text: '你好，请问有什么可以帮助你的？',
		type: 'answer'
	}, {
		text: '你叫什么名字',
		type: 'question'
	}, {
		text: '我叫小爱同学',
		type: 'answer'
	}, ])

	const handleSubmit = () => {
		console.log("======handleSubmit", askText)
		if (askText.value !== '') {
			chatList.value.push({
				text: askText.value,
				type: 'question'
			})

			setTimeout(() => {
				chatList.value.push({
					text: '你好，请问有什么可以帮助你的？',
					type: 'answer'
				})
			}, 1000)
		}
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1, //返回层数，2则上上页
		})
	}
</script>

<style lang="scss" scoped>
	.chatPage {
		width: 100%;
		height: 100vh;

		.tabBar {
			padding-top: 10rpx;
			height: 80rpx;
			width: 100%;

			display: flex;
			align-items: center;

			.t-left {
				padding: 0 10px;
			}

			.t-center {
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				.c-avator {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background-color: #73d6fe;
					margin-right: 10px;
				}
			}

			.t-right {
				padding: 0 10px;
			}
		}

		.chat-content {
			height: calc(100vh - 175rpx);
			width: 100vw;

			.date-box {
				text-align: center;
				color: #777;
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}

			.chat-text-box {
				padding: 0 24rpx;

				.chat-text {
					display: inline-block;
					border-radius: 44rpx;
					padding: 14rpx 32rpx;
					font-size: 28rpx;
					max-width: 50vw;
					margin-bottom: 14rpx;
				}

				&.a-box {
					.chat-text {
						background-color: #F2F2F2;
						color: #333333;
					}
				}

				&.q-box {
					display: flex;
					justify-content: flex-end;

					.chat-text {
						background-color: #40BEFF;
						color: #fff;
					}
				}


			}
		}

		.input-box {
			width: 100%;
			height: 80rpx;
			border-top: 1px solid #F2F2F2;
			display: flex;
			align-items: center;
			padding: 0 28rpx;
			box-sizing: border-box;

			.chat-input {
				background-color: rgb(242, 242, 242);
				font-size: 24rpx;
				padding: 10rpx 24rpx;
				flex: 1;
				border-radius: 4rpx;
			}

			.send-btn {
				font-size: 24rpx;
				background-color: $uni-color-primary;
				padding: 6rpx 24rpx;
				color: #fff;
				border-radius: 20rpx;
				margin-left: 20rpx;
			}
		}

	}
</style>